<template>
  <div class="container-box">
    <div class="container-box-title">
      <img :src="containerData.titleImg" alt="" />
      <div class="title-link">
        <span class="link-1" @click="handleNavToPage(0)"></span>
        <span v-if="containerData.title==='机场油库及航空加油站'" class="link-2" @click="handleNavToPage(1)"></span>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "containerComponent",
  props: {
    containerData: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    handleNavToPage(val){
      const { path, query} = this.containerData
      if(!path) return
      let arr = []
      let name = ""
      if(path.includes("|")){
        arr = path.split('|')
        name = arr[val]
      }else{
        name = path
      }
      this.$router.push({
        name:name,
        query:query
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container-box {
  flex-shrink: 0;
  width: 100%;
  padding: calc(40 / 1920 * 100vw) calc(10 / 1920 * 100vw)
    calc(10 / 1920 * 100vw);
  min-height: calc(100 / 1920 * 100vw);
  border: 1px solid #5f9dc8;
  margin-bottom: calc(30 / 1920 * 100vw);
  background: rgb(2, 6, 21);
  background: linear-gradient(
    0deg,
    rgba(2, 6, 21, 1) 0%,
    rgba(6, 27, 75, 1) 100%
  );
  position: relative;

  &:last-of-type {
    margin-bottom: 0;
  }
}
.container-box-title {
  height: calc(43 / 1920 * 100vw);
  position: absolute;
  top: calc(43 / 1920 * 100vw / -2);
  left: -1px;
  img {
    height: 100%;
  }
  .title-link {
    width:calc(289 / 1920 * 100vw);
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    cursor: pointer;
    &> span{
      &:first-child{
        flex-grow: 1;
      }
      &:nth-child(2){
        width:50%;
        margin-left:10%;
      }
    }
  }
}
</style>
